/*
 * @Author: xu.songsong 
 * @Date: 2022-05-31 08:11:20 
 * @Last Modified by: xu.songsong
 * @Last Modified time: 2022-06-18 18:37:16
 */
import React, { useState, forwardRef, useImperativeHandle,useCallback  } from 'react';
import { Carousel } from 'antd';
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import styles from './index.less';
const contentStyle = {
    height: '100vh',
    color: '#fff',
    textAlign: 'center',
    background: '#364d79',
};
const baseUrl = 'http://mmm.supercube.vip/'
const FullScreenView = (props,ref) => {
    const {scrollInfo = {}} = props;
    console.log('scrollInfo>>>',scrollInfo);
    const [visible, setVisible] = useState(false);
    const screen = useFullScreenHandle();
    const reportChange = useCallback((state, handle) => {
        if (handle === screen) {
            if(!state){
                setVisible(false);
            }
        }
    }, [screen]);
    useImperativeHandle(ref, () => ({
        show: () => {
            setVisible(true);
            screen.enter();
        },
        hide: () => {
            setVisible(false);
            screen.exit();
        }
    }));
    return (
        <FullScreen handle={screen} onChange={reportChange} className={styles.full}>
            {
                visible && (
                    <Carousel autoplay>
                        {
                            scrollInfo?.imgList?.map((item,index)=><div className={styles.item}><img src={`${baseUrl}${item.pictureUrl}`} key={index}/></div>)
                        }
                    </Carousel>
                )
            }
            {
                visible && <img className={styles.qrcode} src={`${baseUrl}${scrollInfo.qrcode}`}/>
            }
        </FullScreen>
    )
}
export default forwardRef(FullScreenView);